<template>
  <div class="grade-subjects">
    <span>{{name}}</span>
    <ul>
      <li v-for="(subject, subjectIndex) in subjects" :key="'grade_' + index + '_subject_' + subjectIndex">
        <router-link :to="{name: 'courses', query: {grade: index, subject: subject.index}}">{{subject.name}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  props: ['index', 'name'],
  computed: {
    ...mapGetters({
      subjects: 'subjects'
    })
  },
  methods: {
    ...mapActions({
      loadSubjects: 'loadSubjects'
    })
  },
  mounted() {
    this.loadSubjects()
  }
}
</script>

<style>
</style>
